<template>
  <div>
    <el-form
      :model="userForm"
      :rules="rules"
      ref="userForm"
    >
      <el-form-item prop="nickname">
        <el-input
          v-model="userForm.nickname"
          placeholder="昵称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item align=center>
        <el-button
          :disabled="isDisabled"
          type="primary"
          @click="handleSetting">
          确定
        </el-button>
        <el-button
          @click="handleCancel">
          跳过
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Vue from 'vue'
export default Vue.extend({
  name: 'MeetingForm',
  data () {
    return {
      isDisabled: true,
      userForm: {
        nickname: ''
      },
      userInfo: null,
      rules: {
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.handleCurrentUserInfo()
  },
  methods: {
    /**
     * 获取当前用户信息
     */
    handleCurrentUserInfo () {
      this.$request.user.currentUserInfo(
        res => {
          this.userInfo = res.data
          this.isDisabled = false
        },
        err => {
          this.$message.error(err.msg)
        }
      )
    },
    handleSetting () {
      this.userInfo.userName = this.userForm.nickname
      this.handleUpdateUserInfo()
    },
    /**
     * 更新用户信息
     */
    handleUpdateUserInfo () {
      this.$request.user.updateUsersInfo(
        this.userInfo.userName,
        this.userInfo.sex,
        this.userInfo.motto,
        this.userInfo.phonenumber,
        this.userInfo.avatar,
        res => {
          this.$message.success('修改昵称成功')
          this.$emit('submit')
        },
        err => {
          this.$message.error(err.msg)
        }
      )
    },
    handleCancel () {
      this.$emit('submit')
    }
  }
})
</script>

<style lang="scss" scoped>
</style>
